<template>
  <li class="filter-item" :class="{ 'has-children': hasChildren }">
    <div class="item-content" @click="toggleExpand">
      {{ item.standardName }}
      <span v-if="hasChildren" class="expand-icon">
        {{ item.expanded ? '−' : '+' }}
      </span>
    </div>

    <!-- 子级容器 -->
    <ul v-if="item.expanded && hasChildren" class="children-container">
      <LevelItem
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    </ul>
  </li>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';
import type { StandardItem } from "@/utils/standards";

const props = defineProps<{
  item: StandardItem;
}>();
watch(() => props.item, (val) => {
  console.log('val', val);
});
const hasChildren = computed(() => {
  return props.item.children && props.item.children.length > 0;
});

const toggleExpand = () => {
  if (hasChildren.value) {
    props.item.expanded = !props.item.expanded;
  }
};
</script>

<style scoped>
.filter-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-content {
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
    margin-right: 10px;
    margin-bottom: 10px;
}

.item-content:hover {
    border-color: #1890ff;
}

.has-children .item-content {
    padding-right: 30px;
}

.expand-icon {
    margin-left: 8px;
    font-weight: bold;
}

.children-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    margin-top: 10px;
    width: 100%;
}
</style>
